$reportPageHeader: 64px;
$reportPageLeftSideBar: 100px;
.custom-report-wrapper{
  user-select: none !important;
  min-width: 1024px;
  .img-wrapper{
    display: inline-block;
    width: 36px;
  }
  .page-header{
    height: $reportPageHeader;
    line-height: $reportPageHeader;
    background: #414141;
    padding: 0 20px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    .left{
      flex: 1;
    }
    .right{
      flex: 1;
      text-align: right;
    }
    .anticon-left{
      font-size: 20px;
      height: 100%;
      line-height: $reportPageHeader;
      vertical-align: top;
      cursor: pointer;
    }
    .report-name{
      font-weight: 500;
      font-size: 20px;
      text-align: left;
      line-height: 32px;
      margin-left: 12px;
    }
  }
  .page-body{
    display: flex;
    height: calc(100% - #{$reportPageHeader});
    .left{
      width: $reportPageLeftSideBar;
      flex: none;
      background: #fff;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .page-body-left{
        .ant-collapse {
          user-select:none;
          font-size: 12px;
          .ant-collapse-item {
            border-bottom: none;
            .ant-collapse-header {
              font-size: 12px;
              font-weight: 500;
              color: #494949;
              text-align: left;
              line-height: 16px;
              padding: 8px 0 8px 28px;
              .arrow {
                font-size: 10px;
                line-height: 32px;
                left: 10px;
              }
            }
            .ant-collapse-content {
              padding: 0;
              .ant-collapse-content-box {
                padding: 0;
                .menu-item-content {
                  position: relative;
                  text-align: center;
                  height: 100px;
                  &:hover {
                    background: #F4F8FF;
                    cursor: pointer;
                    .icon-add {
                      transition: all ease 0.3s;
                      fill: currentColor;
                      position: absolute;
                      top: 10px;
                      right: 10px;
                      color: #4B8DFF;
                      display: block;
                    }
                  }
                  .img-wrapper {
                    margin-top: 16px;
                    width: 48px;
                    height: 48px;
                    .img {
                      width: 48px;
                      height: 48px;
                    }
                  }
                  .menu-title {
                    margin-top: 4px;
                    font-size: 12px;
                    color: #606060;
                    line-height: 16px;
                  }
                  .icon-add {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }

    }
    .right{
      flex: 1;
      padding: 20px 20px 0 20px;
      overflow: auto;
      scroll-behavior: smooth; //safari 不支持
      user-select: none !important;
      .page-controller{
        cursor: pointer;
        min-height: 50px;
        padding: 16px 20px;
        text-align: center;
        background: #fff;
        font-size: 16px;
        color: #5F98FF;
        font-weight: 500;
      }
      .advanced-search-box {
        background-color: #fff;
        padding: 16px 20px 1px 20px;
      }
    }
  }
  .page-content{
    width: 100%;
    .page-graph-groups{
      position: relative;
      min-height: calc(100vh - 166px);
      width: calc(100% + 16px);
      margin: 20px -16px 20px -8px;
      .ant-card {
        .ant-card-head {
          padding: 0 20px;
        }
        .extra-operation {
          .icon {
            margin: 0 4px;
            cursor: pointer;
          }
        }
      }

      .full, .half {
        margin: 0 8px 12px 8px;
        position: absolute;
        transition: width ease 0.3s;
      }

      .full {
        width: calc(100% - 16px);
      }
      .half {
        width: calc((100% - 32px)/2);
      }

      .muuri-item {
        box-shadow: 0 0 0 0 rgba(0,0,0,0);
        transition: box-shadow ease 0.3s;
      }

      .muuri-item-placeholder-index {
        z-index: -1;
        background-color: #D2E1FA;
        border-radius: 2px;
      }

      .muuri-item-dragging-index {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.15);
        z-index: 2000;
      }
      .muuri-item-releasing-index {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.15);
        z-index: 2000;
      }

    }
  }
}

#custom-report-drag-container {
  width: calc(100% - 140px);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20000;
  .muuri-item-dragging-index {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.15);
    z-index: 2000;
  }
  .muuri-item-releasing-index {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.15);
    z-index: 2000;
  }
  .full, .half {
    margin: 0 8px 12px 8px;
  }

  .full {
    width: calc(100% - 16px);
  }
  .half {
    width: calc((100% - 32px)/2);
  }
  .ant-card {
    .ant-card-head {
      padding: 0 20px;
    }
    .extra-operation {
      .icon {
        margin: 0 4px;
        cursor: pointer;
      }
    }
  }
}
